<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../../css/geological/reset.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/geological/css.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/geological/animate.css"/>
    <link rel="stylesheet" type="text/css" href="../../js/geological/jquery.confirm/jquery.confirm.css"/>
    <link rel="stylesheet" type="text/css" href="../../js/geological/zTree/zTreeStyle/zTreeStyle.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/geological/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/geological/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../css/geological/daterangepicker.css" />
    <link rel="stylesheet" type="text/css" href="../../css/geological/public.css"/>
    <script type="text/javascript" src="../../js/geological/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/geological/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../../js/geological/messages_zh.min.js"></script>
    <script type="text/javascript" src="../../js/geological/jquery.niceScroll.min.js"></script>
    <script type="text/javascript" src="../../js/geological/jquery.confirm/jquery.confirm.js"></script>
    <script type="text/javascript" src="../../js/geological/zTree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="../../js/geological/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../../js/geological/moment.min.js"></script>
    <script type="text/javascript" src="../../js/geological/daterangepicker.js"></script>
    <!--[if lt IE 9]>
    <script src="../../js/geological/html5shiv.min.js"></script>
    <script src="../../js/geological/respond.min.js"></script>
    <![endif]-->
    <title>数据查询</title>
    <style>
        .nicescroll-rails.nicescroll-rails-vr{
            background: transparent!important;
            left:2.715rem!important;
        }
    </style>
</head>
<body id="data-search">
<div class="data-search-main clearfix">
    <div class="sm-left">
       <div class="title">
           <div class="title-icon"></div>
           检测成果
           <div class="title-btn"></div>
       </div>
        <div class="search-box disno">
            <input type="text" id="search-input" name="search" placeholder="输入设备名称" onblur="this.placeholder='输入设备名称'"  onfocus="this.placeholder=''"/>
            <div class="search-btn"></div>
        </div>
        <div class="tree">
            <ul id="busTree" class="ztree">

            </ul>
        </div>
        <p class="left-open-btn disno"></p>
    </div>
    <div class="big-right relative">
        <div class="right-top-tools">
            <div class="data-class-btns clearfix">
                <div class="class-btn active">
                    <div class="icon icon-bg wy">
                        <div class="pic"></div>
                    </div>
                    位移监测
                </div>
                <div class="class-btn">
                    <div class="icon icon-bg yl">
                        <div class="pic"></div>
                    </div>
                    雨量监测
                </div>
                <div class="class-btn">
                    <div class="icon icon-bg xz">
                        <div class="pic"></div>
                    </div>
                    拉线位移
                </div>
                <div class="class-btn">
                    <div class="icon icon-bg ot">
                        <div class="pic"></div>
                    </div>
                    其他
                </div>
            </div>
            <div class="zd-tab clearfix">
                <div class="my-tab">
                    gnss201
                </div>
                <div class="my-tab">
                    gnss211
                </div>
                <div class="my-tab">
                    gnss221
                </div>
                <div class="draptop">

                </div>
            </div>
            <div class="right-top-tools-open">

            </div>
        </div>
        <div class="table-container">
           <div class="table-tool disno">
                <div id="reportrange" class="pull-left">
                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                    <span></span> <b class="caret"></b>
                </div>
                <select name="time-gap" id="time-select">
                    <option value="1">一小时</option>
                    <option value="2">半小时</option>
                    <option value="3">15分钟</option>
                    <option value="4">5分钟</option>
                </select>
                <div class="search-at">
                    查询
                </div>
            </div>
            <div class="table-tab clearfix">
                <div class="tab current">
                    最新数据
                </div>
                <div class="tab ls-data">
                    历史数据
                </div>
                <div class="tab">
                    原始数据
                </div>
            </div>
            <table id="datatable" class="display" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
                </thead>
            </table>
        </div>
        <!-- 
        <div class="footer clearfix">
            <div class="foot-l left">
                Copyright © 2016-2017&nbsp;&nbsp;<a href="https://www.baidu.com">深圳市城市公共安全技术研究院</a>.&nbsp;&nbsp;All rights reserved.
            </div>
            <div class="foot-r right">
                Version 1.0.1
            </div>
        </div>
         -->
    </div>
</div>
<script type="text/javascript" src="../../js/geological/public.js"></script>
<script type="text/javascript">
    $(".data-class-btns").on("click",".class-btn",function(){
        $(this).addClass("active").siblings(".class-btn").removeClass("active");
    });
    $(".table-tab").on("click",".tab",function(){
        $(this).addClass("current").siblings(".tab").removeClass("current");
        if($(this).hasClass("ls-data")){
            $(".table-tool").show();
        }else{
            $(".table-tool").hide();
        }
    });
    $(".draptop").on("click",function(){
        $(".right-top-tools").toggleClass("right-top-tools-close");
        setTimeout(function(){
            $(".right-top-tools-open").show();
        },300);
    });
    $(".right-top-tools-open").on("click",function(){
        $(".right-top-tools").toggleClass("right-top-tools-close");
        $(this).hide();
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
    	var _pagesize = 5;
        $('#datatable').DataTable( {
            "info":0,
            "pageLength": _pagesize,
            "lengthChange":false,
            "searching":false,
            "ordering":true,
            "processing": true,
            "serverSide": true,
            "ajax": { 
            	url: "../../sys_config/list",  
            	type: "post",
            	contentType: "application/json",
                dataType: "json",
                data: function( data ) {
                	if( data.order && data.order.length > 0 && data.columns && data.columns.length > 0 ){
                		data.orderIndex = data.order[0].column;
                		if( data.columns.length >= ( data.orderIndex + 1 )){
                			data.orderColName = data.columns[data.orderIndex].data;
                		}
                		data.orderType = data.order[0].dir;
                	}
                    data.page = data.start/data.length + 1;
                    data.pagesize = _pagesize;
                    return JSON.stringify(data);
                },
                dataSrc: function ( json ) {
                	json.recordsTotal = json.pagination.totalRecord;
                	json.recordsFiltered = json.pagination.totalRecord;
                	return json.data;
                }
            },
            "columns": [
                { "data": "c_value" },
                { "data": "id" },
                { "data": "c_code" },
                { "data": "remark" },
                { "data": "c_order" },
                { "data": "c_code" }
            ],
            "language": {
                "paginate": {
                    "next": "下一页",
                    "previous": "上一页",
                }
            }
        } );
        //        rangedate
        var start = moment().subtract(29, 'days');
        var end = moment();

        function cb(start, end) {
            $('#reportrange span').html( start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY') );
        }
        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '最近一周': [moment().subtract(6, 'days'), moment()],
                '最近30天': [moment().subtract(29, 'days'), moment()],
                '当月': [moment().startOf('month'), moment().endOf('month')],
                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月' ],
                firstDay : 1
            }
        }, cb);

        cb(start, end);
        //    jq.ztree
        var setting = {
//            isSimpleData : true,              //数据是否采用简单 Array 格式，默认false
//            treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性
//            treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性
//            showLine : true,                  //是否显示节点间的连线
//            checkable : true                  //每个节点上是否显示 CheckBox
        };
        var zNodes =[
            { name:"深圳", open:true,iconSkin:"myTree-level1",
                children: [
                    { name:"某某区",
                        iconSkin:"myTree-level2",
                        children: [
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"}
                        ]},
                    { name:"某某区",
                        iconSkin:"myTree-level2",
                        children: [
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"}
                        ]},
                    { name:"某某区",iconSkin:"myTree-level2", isParent:true}
                ]},
            { name:"上海",iconSkin:"myTree-level1",
                children: [
                    { name:"某某区", open:true,
                        iconSkin:"myTree-level2",
                        children: [
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"}
                        ]},
                    { name:"某某区",
                        iconSkin:"myTree-level2",
                        children: [
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"}
                        ]},
                    { name:"某某区",
                        iconSkin:"myTree-level2",
                        children: [
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"}
                        ]}
                ]},
            { name:"广州",iconSkin:"myTree-level1", isParent:true}
        ];
        zTreeObj = $.fn.zTree.init($("#busTree"), setting, zNodes);
////        jq.confirm
//        $('.news-tool>div.del').click(function(){
//            var elem = $(this).closest('li');
//            $.confirm({
//                'title':'警告！',
//                'message':'删除后将不可恢复，确认删除？',
//                'buttons':{
//                    '是':{
//                        'class'	: 'blue',
//                        'action': function(){
//                            elem.fadeOut();
//                        }
//                    },
//                    '否':{
//                        'class'	: 'gray',
//                        'action': function(){}
//                    }
//                }
//            });
//        });
////        jq.nicescroll
        $(".sm-left>.tree").niceScroll({
            cursorcolor:"#999",
            cursoropacitymax:1,
            touchbehavior:false,
            cursorwidth:"6px",
            cursorborder:"0",
            cursorborderradius:"5px",
            autohidemode:false,
        })
    });
</script>
</body>
</html>